import { shopStatReturnReason } from '../../services/API';
import echarts from './echarts';
export default async function (chartPanel) {
  if (!chartPanel) return;
  try {
    chartPanel.toggleLoading(true);
    const reasonData = await shopStatReturnReason();
    if (!chartPanel) return;
    if (reasonData.data.length === 0) {
      chartPanel.toggleIsEmpty(true);
      return;
    }
    const data = reasonData.data.map(el => ({ name: el.reason, value: el.value }));
    var chartDom = chartPanel.getChartContainer();
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'item',
        padding: 5,
        position: 'right',
        textStyle: {
          fontSize: 10
        }
      },
      legend: {
        show: false
      },
      series: [
        {
          name: 'Return reason',
          type: 'pie',
          radius: ['50%', '80%'],
          avoidLabelOverlap: false,
          selectedMode: 'single',
          select: {
            label: {
              show: true,
              formatter: '{b}: {d}%'
            }
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              formatter: '{b}: {d}%'
            }
          },
          labelLine: {
            show: false
          },
          data
        }
      ]
    };
    myChart.setOption(option);
  } catch (err) {
    console.log(err);
  } finally {
    chartPanel.toggleLoading(false);
  }
}
